<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/myJS/custom.js"></script>
    <script src="/static/moment/moment.min.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body class="" style="padding: 10px">



    <blockquote class="layui-elem-quote layui-quote-nm" style="font-weight: bold;font-size: large;font-family: 华文楷体" id="goodsname"></blockquote>
    <div class="layui-carousel layui-col-md8" id="test1" lay-filter="test1">
        <div carousel-item="">
            <div><img id="img1" src="" height="100%" alt="暂无图片"></div>
            <div><img id="img2" src="" height="100%" alt="暂无图片"></div>
            <div><img id="img3" src="" height="100%" alt="暂无图片"></div>
        </div>
    </div>

    <div class="layui-col-md3 layui-col-md-offset1">
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <strong id="typename" style="font-size: larger"></strong>
                            <label style="font-size: smaller">类</label>
                            <div style="float: right;color: #0000FF;" id="goodsstar"></div>
                        </div>
                        <div class="layui-card-body">
                            <label>卖家介绍：</label><label id="goodsdesc"></label><br>
                            <label>剩余数量：</label><label id="goodsnum" style="font-style: italic;color: #0000FF"></label>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">卖家联系方式</div>
                        <div class="layui-card-body">
                            <label>卖家账号：</label><label id="username" style="font-style: italic;"></label><br>
                            <label>联系电话：</label><label id="phone" style="font-style: italic;"></label><br>
                            <label>邮箱地址：</label><label id="email" style="font-style: italic;"></label><br>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">价格</div>
                        <div class="layui-card-body" style="font-size: larger">
                            <label>￥</label>
                            <label id="goodsprice" style="font-size: 24px;font-weight: bolder;font-style: oblique; color: #FF0000"></label>
                            <label id="goodsunit"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="layui-bg-gray">
    <br>
    <div style="float: right; padding-right: 5%">
        <button class="layui-btn layui-btn-danger" id="buyNow">立即购买</button>
        <button class="layui-btn layui-btn-warm" id="addToList">加入购物车</button>
    </div>
    <br><br>

    <form class="layui-form" action="" id="goodsEdit" lay-filter="goodsEdit" style="display: none">
        <input type="hidden" id="goodsid" name="goodsid" />
        <!--<input type="hidden" id="fksellerid" name="fksellerid" />
        <input type="hidden" id="goodscreatetime" name="goodscreatetime" />-->

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收货地址</label>
                <div class="layui-input-inline">
                    <select name="fkaddressid" id="fkaddressid" lay-search="" >
                        <option value=""></option>
                    </select>
                </div>
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <input type="text" id="goodnum" name="goodnum" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-danger" type="button" lay-submit lay-filter="goodsSubmit">确认购买</button>
                </div>
            </div>
        </div>

    </form>

    <br><br><br>

    <blockquote class="layui-elem-quote layui-quote-nm " style="font-weight: bold;font-size: large;font-family: 华文楷体">用户评论</blockquote>
    <div class="layui-collapse" id="remarkList" lay-filter="filter" lay-accordion=""></div>




    <br><br><br>

</body>

</html>

<script>

    var loginUserid = getLoginUserid();
    layui.use(['form', 'carousel', 'laytpl', 'layer', 'element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,carousel = layui.carousel
            ,laytpl = layui.laytpl
            ,element = layui.element;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,width: '700px'
            ,height: '400px'
            ,interval: 2000
        });

        loadGoods();
        showRemark(laytpl,element);

        //加载用户信息下拉列表
        $.ajax({
            url:"/restful/find",
            type:"POST",
            data:JSON.stringify({
                firstTable:"addresses",
                wheres:[
                    {field:"addresses.fkuserid", value:getLoginUserid()}
                ]
            }),
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            async:false,
            success : function(result) {
                var data = result.data;
                var count = result.count;
                for(var i = 0 ; i < count ; i ++){
                    $('#fkaddressid').append("<option value='" +
                        data[i].addressid + "'>" +
                        data[i].addressname + " / " +
                        data[i].addressdesc + " / " +
                        data[i].contactphone + "</option>");
                }
                form.render("select");
            },
            error:function(msg){
                layer.alert(msg);
                $('#fkaddressid').append("<option value=''>加载错误</option>");
            }
        });

        form.on('submit(goodsSubmit)', function(data){
            var goodnum = $('#goodnum').val();
            var goodsid = localStorage.goodsid;
            var fkaddressid = $("#fkaddressid option:selected").val();
            $.ajax({
                url:"/order/add/" + goodsid + "/" + goodnum + "/" + fkaddressid,
                type:"GET",
                dataType : "json",
                async: false,
                success : function(result) {
                    if(result.code == 0){
                        layer.msg(result.msg, {icon : 1});

                    }else{
                        layer.msg(result.msg, {icon : 5});
                    }
                },
                error:function(result){
                    layer.msg(result.msg, {icon : 5});
                }
            });
            return false;
        });


    });



    $('#buyNow').on('click', function () {
        $('#goodsEdit').css('display','block');
    });

    $('#addToList').on('click', function () {
        $.ajax({
            url:"/list/add",
            type:"POST",
            data:JSON.stringify({
                fkgoodsid:localStorage.goodsid,
                fksaverid:getLoginUserid(),
                listtime:getDatetime()
            }),
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            async:false,
            success : function(result) {
                if(result.code==0){
                    layer.msg(result.msg, {icon:1});
                }else{
                    layer.msg(result.msg, {icon:5});
                }
            },
            error:function(result){
                layer.msg(result.msg, {icon:5});
            }
        });
    });


    function loadGoods() {
        if(localStorage.goodsid){
            $.ajax({
                url:"/restful/find",
                type:"POST",
                data:JSON.stringify({
                    firstTable:"goods",
                    relations:{
                        "goods.fktypeid":"types.typeid",
                        "goods.fksellerid":"users.userid"
                    },
                    wheres:[{field:"goods.goodsid",value:localStorage.goodsid}]
                }),
                contentType: "application/json;charset=utf-8",
                dataType : "json",
                async:false,
                success : function(result) {
                    var data = result.data[0];
                    //表单input初始赋值
                    // alert(JSON.stringify(data));
                    $('#goodsname').html(data.goodsname);
                    $('#goodsnum').html(data.goodnum);
                    $('#goodsdesc').html(data.goodsdesc);
                    $('#goodsprice').html(data.goodsprice);
                    $('#goodsunit').html("/" + data.goodsunit);

                    $('#username').html(data.username);
                    $('#phone').html(data.phone);
                    $('#email').html(data.email);
                    $('#typename').html(data.typename);
                    if(data.goodsstar){
                        $('#goodsstar').html(data.goodsstar + "分");
                    }else {
                        $('#goodsstar').html("暂无评分");
                    }


                    $('#img1').attr("src", "/upload/" + data.goodsimg1);
                    $('#img2').attr("src", "/upload/" + data.goodsimg2);
                    $('#img3').attr("src", "/upload/" + data.goodsimg3);
                },
                error:function(msg){
                    layer.alert(msg);
                    $('#fktypeid').append("<option value=''>加载错误</option>");
                }
            });
        }
    }

    function showRemark(laytpl,element) {
        var goodsid = localStorage.goodsid;

        $.ajax({
            url:"/record/getRemark/" + goodsid,
            type:"GET",
            dataType : "json",
            async : false,
            success : function(result) {
                //第三步：渲染模版
                var getTpl = $('#demo').html()
                    ,view = $('#remarkList');
                laytpl(getTpl).render(result.data, function (html) {
                    view.html(html);
                });
                element.render('collapse');
                // layer.msg("加载成功", {icon:1});
            },
            error:function(result){
                layer.msg(result.msg, {icon:5});
            }
        });
    }


</script>

<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<script id="demo" type="text/html">
    <ul class="layui-timeline">
        {{#  if(d.recordList.length === 0){ }}
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">暂无用户评论</div>
            </div>
        {{#  }else{ }}
            {{#  layui.each(d.recordList, function(index, record){ }}
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <label class="layui-timeline-title" style="font-weight: bold;font-size: larger">{{ record.remarktime }}</label>
                        <label class="layui-timeline-title layui-col-md-offset8" style="font-style: italic">{{ record.username }}</label>
                        <label class="layui-timeline-title layui-col-md-offset1" style="color: #FF0000;font-style: italic">{{ record.star }}分</label>
                        <p>{{ record.remark }}</p>
                    </div>
                </li>
            {{#  }); }}
        {{#  } }}
    </ul>
</script>
